<template>
	<view class="uv-form-item">
		<view
			class="uv-form-item__body"
			@tap="clickHandler"
			:style="[$uv.addStyle(customStyle), {
				flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
			}]"
		>
			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
			<slot name="label">
				<!-- {{required}} -->
				<view
					class="uv-form-item__body__left"
					v-if="required || leftIcon || label"
					:style="{
						width: $uv.addUnit(labelWidth || parentData.labelWidth),
						marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
					}"
				>
					<!-- 为了块对齐 -->
					<view class="uv-form-item__body__left__content">
						<!-- nvue不支持伪元素before -->
						<text
							v-if="required"
							class="uv-form-item__body__left__content__required"
						>*</text>
						<view
							class="uv-form-item__body__left__content__icon"
							v-if="leftIcon"
						>
							<uv-icon
								:name="leftIcon"
								:custom-style="leftIconStyle"
							></uv-icon>
						</view>
						<text
							class="uv-form-item__body__left__content__label"
							:style="[parentData.labelStyle, {
								justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
							}]"
						>{{ label }}</text>
					</view>
				</view>
			</slot>
			<view class="uv-form-item__body__right">
				<view class="uv-form-item__body__right__content">
					<view class="uv-form-item__body__right__content__slot">
						<slot />
					</view>
					<view
						class="item__body__right__content__icon"
						v-if="$slots.right"
					>
						<slot name="right" />
					</view>
				</view>
			</view>
		</view>
		<view class="uv-form-item__body__right__message__box">
			<slot name="error">
				<uv-transition :show="true" :duration="100" mode="slide-down" v-if="!!message && parentData.errorType === 'message'">
					<text
						class="uv-form-item__body__right__message"
						:style="{
							marginLeft:  $uv.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
						}"
					>{{ message }}</text>
				</uv-transition>
			</slot>
		</view>
		<uv-line
			v-if="borderBottom"
			:color="message && parentData.errorType === 'border-bottom' ? '#f56c6c' : '#d6d7d9'"
		></uv-line>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance  } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	defineExpose({ validate })
	
	// 获取当前组件实例
	const instance = getCurrentInstance();

	onMounted(() => {
		// 将当前组件添加到父组件的 formItems 数组中
		instance.parent.formItems.push(instance);
	});
	
	function validate(){
	    return Promise.all(formItems.value.map((formItem) => formItem.validate()));
	}
</script>
<style>
</style>